<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阅读理解解题高手 - 六年级语文助手</title>
    <style>
        * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    color: #333;
    line-height: 1.6;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

/* 头部样式 */
.header {
    text-align: center;
    margin-bottom: 40px;
    color: white;
}

.header-content {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
}

.logo-icon {
    font-size: 3rem;
}

.header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
}

.subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
    margin: 0;
}

/* 主要内容区域 */
.main-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* 卡片通用样式 */
.upload-card, .preview-card, .analysis-card, .tips-card {
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 上传区域 */
.upload-area {
    border: 3px dashed #ddd;
    border-radius: 15px;
    padding: 50px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #fafafa;
}

.upload-area:hover {
    border-color: #667eea;
    background: #f0f4ff;
    transform: translateY(-2px);
}

.upload-area.dragover {
    border-color: #667eea;
    background: #e8f2ff;
    transform: scale(1.02);
}

.upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.upload-icon {
    font-size: 4rem;
    margin-bottom: 10px;
}

.upload-content h3 {
    font-size: 1.5rem;
    color: #333;
    margin: 0;
}

.upload-content p {
    color: #666;
    margin: 0;
    max-width: 400px;
}

.upload-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 25px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}

.upload-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.upload-tips {
    margin-top: 10px;
}

.upload-tips small {
    color: #999;
    font-size: 0.9rem;
}

/* 预览区域 */
.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.preview-header h3 {
    color: #333;
    font-size: 1.3rem;
    margin: 0;
}

.reupload-btn {
    background: #6c757d;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 15px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.reupload-btn:hover {
    background: #5a6268;
    transform: translateY(-1px);
}

.image-preview {
    text-align: center;
    margin-bottom: 25px;
}

.image-preview img {
    max-width: 100%;
    max-height: 500px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    border: 2px solid #f0f0f0;
}

.analyze-actions {
    text-align: center;
}

.analyze-btn {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    border: none;
    padding: 15px 40px;
    border-radius: 25px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}

.analyze-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4);
}

/* 分析结果区域 */
.analysis-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
}

.analysis-header h3 {
    color: #333;
    font-size: 1.4rem;
    margin: 0;
}

.teacher-avatar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #ffeaa7, #fab1a0);
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    color: #333;
}

.teacher-avatar span:first-child {
    font-size: 1.2rem;
}

.teacher-name {
    font-weight: 600;
}

.analysis-content {
    line-height: 1.8;
}

.analysis-step {
    background: #f8f9fa;
    border-left: 4px solid #667eea;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 0 10px 10px 0;
}

.step-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-content {
    color: #555;
    margin-bottom: 15px;
}

.step-example {
    background: white;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    font-style: italic;
    color: #666;
}

.key-points {
    background: linear-gradient(135deg, #e3f2fd, #f3e5f5);
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
}

.key-points h4 {
    color: #333;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.key-points ul {
    list-style: none;
    padding: 0;
}

.key-points li {
    padding: 8px 0;
    padding-left: 25px;
    position: relative;
    color: #555;
}

.key-points li:before {
    content: "✨";
    position: absolute;
    left: 0;
    top: 8px;
}

/* 小贴士区域 */
.tips-section h3 {
    text-align: center;
    color: #333;
    margin-bottom: 25px;
    font-size: 1.4rem;
}

.tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.tip-item {
    text-align: center;
    padding: 25px 15px;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 15px;
    transition: all 0.3s ease;
}

.tip-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.tip-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.tip-item h4 {
    color: #333;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.tip-item p {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* 加载动画 */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.loading-content {
    background: white;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    max-width: 400px;
    margin: 20px;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-content p {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 15px;
}

.loading-tips {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 10px;
    margin-top: 20px;
}

.loading-tips p {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .container {
        padding: 15px;
    }
    
    .header h1 {
        font-size: 2rem;
    }
    
    .subtitle {
        font-size: 1rem;
    }
    
    .upload-area {
        padding: 30px 15px;
    }
    
    .upload-icon {
        font-size: 3rem;
    }
    
    .tips-grid {
        grid-template-columns: 1fr;
    }
    
    .analysis-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
    
    .preview-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
}

/* 动画效果 */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
    </style>
    
</head>
<body>
    <div class="container">
        <header class="header">
            <div class="header-content">
                <div class="logo">
                    <span class="logo-icon">📚</span>
                    <h1>阅读理解解题高手</h1>
                </div>
                <p class="subtitle">专业六年级语文老师在线指导，让阅读理解变得简单有趣！</p>
            </div>
        </header>

        <div class="main-content">
            <!-- 上传区域 -->
            <section class="upload-section">
                <div class="upload-card">
                    <div class="upload-area" id="uploadArea">
                        <div class="upload-content">
                            <div class="upload-icon">📷</div>
                            <h3>上传阅读理解题目</h3>
                            <p>拍照上传你的阅读理解题目，老师来帮你分析解题思路</p>
                            <button class="upload-btn" id="uploadBtn">选择图片</button>
                            <div class="upload-tips">
                                <small>支持JPG、PNG格式，建议图片清晰完整</small>
                            </div>
                        </div>
                        <input type="file" id="fileInput" accept="image/*" style="display: none;">
                    </div>
                </div>
            </section>

            <!-- 图片预览区域 -->
            <section class="preview-section" id="previewSection" style="display: none;">
                <div class="preview-card">
                    <div class="preview-header">
                        <h3>📖 题目预览</h3>
                        <button class="reupload-btn" id="reuploadBtn">重新上传</button>
                    </div>
                    <div class="image-preview">
                        <img id="previewImage" alt="题目预览">
                    </div>
                    <div class="analyze-actions">
                        <button class="analyze-btn" id="analyzeBtn">🔍 开始分析解题思路</button>
                    </div>
                </div>
            </section>

            <!-- 分析结果区域 -->
            <section class="analysis-section" id="analysisSection" style="display: none;">
                <div class="analysis-card">
                    <div class="analysis-header">
                        <h3>🎯 解题指导</h3>
                        <div class="teacher-avatar">
                            <span>👩‍🏫</span>
                            <span class="teacher-name">语文老师</span>
                        </div>
                    </div>
                    
                    <div class="analysis-content" id="analysisContent">
                        <!-- 分析内容将在这里动态生成 -->
                    </div>
                </div>
            </section>

            <!-- 学习小贴士 -->
            <section class="tips-section">
                <div class="tips-card">
                    <h3>💡 阅读理解小贴士</h3>
                    <div class="tips-grid">
                        <div class="tip-item">
                            <div class="tip-icon">📝</div>
                            <h4>仔细审题</h4>
                            <p>先读题目，明确要求，带着问题去阅读文章</p>
                        </div>
                        <div class="tip-item">
                            <div class="tip-icon">🔍</div>
                            <h4>找关键词</h4>
                            <p>在文章中找到与题目相关的关键词句</p>
                        </div>
                        <div class="tip-item">
                            <div class="tip-icon">💭</div>
                            <h4>理解文意</h4>
                            <p>理解文章的主要内容和作者想表达的意思</p>
                        </div>
                        <div class="tip-item">
                            <div class="tip-icon">✏️</div>
                            <h4>组织答案</h4>
                            <p>用完整的句子回答，注意语言表达的准确性</p>
                        </div>
                    </div>
                </div>
            </section>
        </div>

        <!-- 加载动画 -->
        <div class="loading-overlay" id="loadingOverlay" style="display: none;">
            <div class="loading-content">
                <div class="loading-spinner"></div>
                <p>老师正在仔细分析题目...</p>
                <div class="loading-tips">
                    <p>💡 小提示：好的阅读理解需要耐心和细心哦！</p>
                </div>
            </div>
        </div>
    </div>

    <script >
        class ReadingComprehensionHelper {
    constructor() {
        this.initializeElements();
        this.bindEvents();
        this.currentImage = null;
    }

    initializeElements() {
        this.uploadArea = document.getElementById('uploadArea');
        this.fileInput = document.getElementById('fileInput');
        this.uploadBtn = document.getElementById('uploadBtn');
        this.previewSection = document.getElementById('previewSection');
        this.previewImage = document.getElementById('previewImage');
        this.reuploadBtn = document.getElementById('reuploadBtn');
        this.analyzeBtn = document.getElementById('analyzeBtn');
        this.analysisSection = document.getElementById('analysisSection');
        this.analysisContent = document.getElementById('analysisContent');
        this.loadingOverlay = document.getElementById('loadingOverlay');
    }

    bindEvents() {
        // 文件上传事件
        this.uploadBtn.addEventListener('click', () => this.fileInput.click());
        this.fileInput.addEventListener('change', (e) => this.handleFileSelect(e));

        // 拖拽事件
        this.uploadArea.addEventListener('dragover', (e) => this.handleDragOver(e));
        this.uploadArea.addEventListener('dragleave', (e) => this.handleDragLeave(e));
        this.uploadArea.addEventListener('drop', (e) => this.handleDrop(e));

        // 其他按钮事件
        this.reuploadBtn.addEventListener('click', () => this.resetUpload());
        this.analyzeBtn.addEventListener('click', () => this.analyzeImage());
    }

    handleDragOver(e) {
        e.preventDefault();
        this.uploadArea.classList.add('dragover');
    }

    handleDragLeave(e) {
        e.preventDefault();
        this.uploadArea.classList.remove('dragover');
    }

    handleDrop(e) {
        e.preventDefault();
        this.uploadArea.classList.remove('dragover');
        const files = Array.from(e.dataTransfer.files).filter(file => file.type.startsWith('image/'));
        if (files.length > 0) {
            this.processFile(files[0]);
        }
    }

    handleFileSelect(e) {
        const file = e.target.files[0];
        if (file && file.type.startsWith('image/')) {
            this.processFile(file);
        }
    }

    processFile(file) {
        this.currentImage = file;
        const reader = new FileReader();
        
        reader.onload = (e) => {
            this.previewImage.src = e.target.result;
            this.showPreview();
        };
        
        reader.readAsDataURL(file);
    }

    showPreview() {
        this.previewSection.style.display = 'block';
        this.previewSection.classList.add('fade-in');
        this.previewSection.scrollIntoView({ behavior: 'smooth' });
    }

    resetUpload() {
        this.previewSection.style.display = 'none';
        this.analysisSection.style.display = 'none';
        this.fileInput.value = '';
        this.currentImage = null;
    }

    showLoading() {
        this.loadingOverlay.style.display = 'flex';
    }

    hideLoading() {
        this.loadingOverlay.style.display = 'none';
    }

    async analyzeImage() {
        if (!this.currentImage) return;

        this.showLoading();
        
        // 模拟分析过程
        await this.simulateAnalysis();
        
        this.hideLoading();
        this.displayAnalysis();
    }

    async simulateAnalysis() {
        // 模拟AI分析过程，实际应用中这里会调用图像识别和文本分析API
        return new Promise(resolve => {
            setTimeout(resolve, 3000);
        });
    }

    displayAnalysis() {
        const analysisHTML = this.generateAnalysisContent();
        this.analysisContent.innerHTML = analysisHTML;
        this.analysisSection.style.display = 'block';
        this.analysisSection.classList.add('fade-in');
        this.analysisSection.scrollIntoView({ behavior: 'smooth' });
    }

    generateAnalysisContent() {
        // 这里是模拟的分析内容，实际应用中会根据图像识别结果生成
        return `
            <div class="analysis-step">
                <div class="step-title">
                    <span>📋</span>
                    第一步：仔细审题
                </div>
                <div class="step-content">
                    首先，我们要认真读题目，理解题目在问什么。看看是问文章的主要内容、作者的情感态度，还是要我们概括段落大意。
                </div>
                <div class="step-example">
                    💡 小贴士：用笔圈出题目中的关键词，比如"主要内容"、"为什么"、"怎么样"等。
                </div>
            </div>

            <div class="analysis-step">
                <div class="step-title">
                    <span>📖</span>
                    第二步：通读全文
                </div>
                <div class="step-content">
                    带着问题去读文章，第一遍先快速浏览，了解文章大概讲了什么事情，有哪些主要人物。
                </div>
                <div class="step-example">
                    💡 小贴士：可以边读边用笔做简单的标记，比如在重要的句子下面画线。
                </div>
            </div>

            <div class="analysis-step">
                <div class="step-title">
                    <span>🔍</span>
                    第三步：精读找答案
                </div>
                <div class="step-content">
                    根据题目要求，在文章中找到相关的段落和句子。通常答案就在文章里，要学会"从文中找"。
                </div>
                <div class="step-example">
                    💡 小贴士：答案往往在文章的开头、结尾，或者每段的第一句、最后一句。
                </div>
            </div>

            <div class="analysis-step">
                <div class="step-title">
                    <span>✏️</span>
                    第四步：组织答案
                </div>
                <div class="step-content">
                    把找到的关键信息用自己的话整理成完整的句子。注意语言要通顺，表达要清楚。
                </div>
                <div class="step-example">
                    💡 小贴士：回答问题时要用完整的句子，可以先说"文章主要讲了..."或"作者认为..."。
                </div>
            </div>

            <div class="key-points">
                <h4>🎯 解题关键点</h4>
                <ul>
                    <li>认真审题，明确题目要求</li>
                    <li>在文章中寻找关键词句</li>
                    <li>理解文章的主要内容和中心思想</li>
                    <li>注意文章的结构和段落关系</li>
                    <li>用规范的语言组织答案</li>
                    <li>检查答案是否完整、准确</li>
                </ul>
            </div>

            <div class="analysis-step">
                <div class="step-title">
                    <span>🌟</span>
                    老师的话
                </div>
                <div class="step-content">
                    同学，阅读理解其实并不难，关键是要有耐心和方法。多读几遍文章，仔细思考，答案就在文章里等着你去发现呢！记住，好的阅读习惯需要慢慢培养，加油！
                </div>
            </div>
        `;
    }
}

// 初始化应用
document.addEventListener('DOMContentLoaded', () => {
    new ReadingComprehensionHelper();
});

// 添加一些实用的工具函数
class ReadingTips {
    static getRandomTip() {
        const tips = [
            "📚 多读课外书可以提高阅读理解能力哦！",
            "🤔 遇到不懂的词语，可以根据上下文猜测意思。",
            "📝 做阅读理解时，可以先看题目再读文章。",
            "🎯 答题时要紧扣题目要求，不要答非所问。",
            "✨ 平时要多积累好词好句，提高语言表达能力。"
        ];
        return tips[Math.floor(Math.random() * tips.length)];
    }

    static showTip() {
        const tip = this.getRandomTip();
        console.log(tip);
    }
}

// 每30秒显示一个小贴士
setInterval(() => {
    ReadingTips.showTip();
}, 30000);
    </script>
</body>
</html>